<template>
  <el-drawer
    title="详情"
    size="70%"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">
    <div style="margin: 20px">
      <el-descriptions title="基本信息" :column="6" direction="vertical" :labelStyle="{paddingBottom:'0px'}" :colon="false">
        <el-descriptions-item label="委外编号">{{ data.informationJointCaseVO.externalCode }}</el-descriptions-item>
        <el-descriptions-item label="身份证">{{ data.informationJointCaseVO.idNumber }}</el-descriptions-item>
        <el-descriptions-item label="客户">{{ data.informationJointCaseVO.customerName }}</el-descriptions-item>
        <el-descriptions-item label="手次">{{ data.informationJointCaseVO.customerOrder }}</el-descriptions-item>
        <el-descriptions-item label="委案开始">{{ data.informationJointCaseVO.jointCaseStartDate }}</el-descriptions-item>
        <el-descriptions-item label="委案结束">{{ data.informationJointCaseVO.jointCaseEndDate }}</el-descriptions-item>
        <el-descriptions-item label="共案委案金额之和">{{ data.informationJointCaseVO.jointCaseAmount }}</el-descriptions-item>
        <el-descriptions-item label="共案回收金额之和">{{ data.informationJointCaseVO.recoveryAmount }}</el-descriptions-item>
        <el-descriptions-item label="最近还款时间">{{
            data.informationJointCaseVO.latestRepaymentDate
          }}
        </el-descriptions-item>
        <el-descriptions-item label="最近还款金额">{{
            data.informationJointCaseVO.latestRepaymentAmount
          }}
        </el-descriptions-item>
        <el-descriptions-item label="数据状态">{{ data.informationJointCaseVO.dataStateDescribe }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin: 20px">
      <el-descriptions title="备注" :column="1" :colon="false" :labelStyle="{lineHeight: '30px'}">
        <el-descriptions-item label="备注1">
          <el-input size="small" style="width: 50%" v-model="data.informationJointCaseVO.remarkOne"/>
          <el-button type="primary" style="margin-left: 10px"
                     @click="saveRemark({remarkOne: data.informationJointCaseVO.remarkOne})"
                     size="small">编辑
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="备注2">
          <el-input size="small" style="width: 50%" v-model="data.informationJointCaseVO.remarkTwo"/>
          <el-button type="primary" style="margin-left: 10px"
                     @click="saveRemark({remarkTwo: data.informationJointCaseVO.remarkTwo})"
                     size="small">编辑
          </el-button>
        </el-descriptions-item>
        <el-descriptions-item label="备注3">
          <el-input size="small" style="width: 50%" v-model="data.informationJointCaseVO.remarkThree"/>
          <el-button type="primary" style="margin-left: 10px"
                     @click="saveRemark({remarkThree: data.informationJointCaseVO.remarkThree})"
                     size="small">编辑
          </el-button>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div style="margin: 20px">

      <el-descriptions title="共案信息"/>

      <el-tabs v-model="tabValue" type="card" style="width: 100%; height: 100%">
        <el-tab-pane
          v-for="(item, index) in data.caseVOList"
          :key="item.id + index"
          :label="item.customerName"
          :name="'customer_' + item.id"
        >
          <div style="width: 100%">
            <el-descriptions :column="6" direction="vertical" :labelStyle="{paddingBottom:'0px'}" :colon="false">
              <el-descriptions-item label="债务人">{{ item.name }}</el-descriptions-item>
              <el-descriptions-item label="客户">{{ item.customerName }}</el-descriptions-item>
              <el-descriptions-item label="手次">{{ item.handleTime }}</el-descriptions-item>
              <el-descriptions-item label="委案开始">{{ item.appointmentStartTime }}</el-descriptions-item>
              <el-descriptions-item label="委案结束">{{ item.appointmentEndTime }}</el-descriptions-item>
              <el-descriptions-item label="户籍信息">{{ item.censusRegister }}</el-descriptions-item>
              <el-descriptions-item label="委案金额">{{ item.caseAmount }}</el-descriptions-item>
              <el-descriptions-item label="回收金额">{{ item.repayAllMoneyYes }}</el-descriptions-item>
              <el-descriptions-item label="最近还款时间">{{ item.latestRepaymentDate }}</el-descriptions-item>
              <el-descriptions-item label="最近还款金额">{{ item.latestRepaymentAmount }}</el-descriptions-item>
              <el-descriptions-item label="共案身份证号">{{ item.idNo }}</el-descriptions-item>
            </el-descriptions>
            <div style="margin-bottom: 10px;font-size: 15px;font-weight: bold;">电话列表</div>
            <el-table
              :data="item.phoneList"
              style="width: 100%">
              <el-table-column
                prop="relationshipType"
                label="关系类型"
                width="100">
              </el-table-column>
              <el-table-column
                prop="phoneType"
                label="电话类型"
                width="100">
              </el-table-column>
              <el-table-column
                prop="label"
                label="标签">
              </el-table-column>
              <el-table-column
                width="150"
                prop="phone"
                label="电话号码">
              </el-table-column>
            </el-table>

            <div style="margin-bottom: 10px;margin-top: 40px;font-size: 15px;font-weight: bold;">地址列表</div>
            <el-table
              :data="item.addressList"
              style="width: 100%">
              <el-table-column
                prop="relationshipType"
                label="关系类型"
                width="100">
              </el-table-column>
              <el-table-column
                prop="addressType"
                label="地址类型"
                width="100">
              </el-table-column>
              <el-table-column
                prop="accessValidity"
                label="外访有效性">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>
<script>
import { info, saveRemarkApi } from '@/api/information/case'

export default {
  name: 'CaseInfo',
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      data: {
        informationJointCaseVO: {},
        caseVOList: []
      },
      tabValue: null
    }
  },
  methods: {
    open(id) {
      this.getInfo(id)
      this.drawer = true
    },
    async getInfo(id) {
      const res = await info({ id })
      if (res.code === 200) {
        this.data = res.data
        this.tabValue = 'customer_' + this.data.caseVOList[0].id
      }
    },
    // 关闭
    handleClose() {
      this.drawer = false
      this.data = {
        informationJointCaseVO: {},
        caseVOList: []
      }
    },
    // 保存备注
    async saveRemark(remark) {
      const json = {
        id: this.data.informationJointCaseVO.id,
        ...remark
      }
      const res = await saveRemarkApi(json)
      if (res.code === 200) {
        this.$message.success('编辑成功')
        await this.getInfo(this.data.informationJointCaseVO.id)
      }
    }
  }
}
</script>
